<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情页</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>列表页</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>百洋健康-百洋健康 专业健康咨询电商平台</title>
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/datalist.css" />
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css" />
    <link rel="stylesheet" href="../js/jquery-lxzoom/jquery.lxzoom.css" />
    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/jquery-lxzoom/jquery.lxzoom.js"></script>
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src = "../js/common.js"></script>
    <script src="../js/datalist.js"></script>

    <script>
        jQuery(function($){
            // 插件是否支持链式调用

            $('.datal1').lxzoom({width:500,height:300});

        });
    </script>
</head>
<body>
    <!-- baiyangwang -->
    <div id="baiyang">
            <!-- top-nav -->
            <div id="top">
            <!-- container -->
                <div class="container">
                    <!-- top_nav_l -->
                    <div class="top_l fl clear">
                        <p class="wel">您好，欢迎来到 百洋健康<a href="login.html">[登陆]</a><a href="reg.html">[注册]</a></p>
                    </div><!-- top_l fl -->
                    <!-- top_r -->
                    <div class="top_r fr clear">
                        <ul class="top_r_list clear">
                            <li class="top_r_list1 list0"><span>我的订单</span><span class="glyphicon glyphicon-chevron-down font"></span>
                            <div class="li-list">
                                <dl>
                                    <dt><a herf="#">待付款订单</a></dt>
                                    <dt><a herf="#">待确认收货</a></dt>
                                    <dt><a herf="#">待评价交易</a></dt>
                                </dl>
                                </div>
                            </li>
                            <li class="top_r_list2 list0"><span>我的收藏</span><span class="glyphicon glyphicon-chevron-down font"></span>
                            <div class="li-list">
                                <dl>
                                    <dt><a herf="#">商品收藏</a></dt>
                                    <dt><a herf="#">店铺收藏</a></dt>
                                </dl>
                                </div>
                            </li>
                            <li class="top_r_list3 list0"><span>客户服务</span><span class="glyphicon glyphicon-chevron-down font"></span>
                            <div class="li-list">
                                <dl>
                                    <dt><a herf="#">帮助中心</a></dt>
                                    <dt><a herf="#">售后服务</a></dt>
                                    <dt><a herf="#">客服中心</a></dt>
                                    <dt><a herf="#">商家入住</a></dt>
                                    <dt><a herf="#">商家管理</a></dt>
                                </dl>
                                </div>
                            </li>
                        </ul>
                    </div><!-- top_r fr -->
                </div><!-- top-container -->
                
            </div><!-- top -->
            <!-- header -->
            <div id="header">
            <div class="container">
            <!-- logo -->
                <div class="header-l fl">
                    <a href="../index.html"><h1>百洋健康</h1></a>
                </div>
                <!-- search -->
                <!-- <div class="header-c"> -->
                        <div class="col-lg-6 header-c">
                            <div class="input-group" >
                            <div class="input-group-btn">
                                <div type="text" class="form-control search-l"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    商品<span class="caret"></span>
                                </div>
                                <!-- dropdown-menu -->
                                <ul class="dropdown-menu menu">
                                    <li><a href="#">商品</a></li>
                                    <li><a href="#">店铺</a></li>
                                </ul>
                                </div><!-- input-group-btn -->
                                <input type="search" class="form-control search-c" placeholder="请输入您要搜索的商品"/>
                                <input type="button" class="search-r input-group-btn" data-toggle="dropdown" value="搜索"/>

                            </div><!-- input-group -->
                            <ul class="header-list">
                                <li><a href="#">儿童补钙</a></li>
                                <li><a href="#">蛋白粉</a></li>
                                <li><a href="#">面膜</a></li>
                                <li><a href="#">汇仁</a></li>
                            </ul>
                                
                            
                        </div><!-- col-lg-6 -->
                        <!-- </div> --><!-- header-c -->

                        <!-- header-r -->
                <div class="header-r fr">
                        <div class="shop fl">
                        <i class="glyphicon glyphicon-user"></i>我的商城<span class="caret  up">
                        </span>
                        <div class="shop-list">
                        <dl class="dl0">
                        <dt class="dt1"><a href="#">我的用户中心</a><i class="glyphicon glyphicon-menu-right"></i></dt>
                        <dl class="fl dl1">
                             <dd><a href="#">站内消息</a></dd>
                             <dd><a href="#">咨询回复</a></dd>
                             <dd><a href="#">代金券</a></dd>
                        </dl>
                        <dl class="fr dl2">
                        <dd><a href="#">我的订单</a><i class="glyphicon glyphicon-menu-right"></i></dd>
                       
                        <dd><a href="#">我的收藏</a><i class="glyphicon glyphicon-menu-right"></i></dd>
                        
                        <dd><a href="#">我的积分</a><i class="glyphicon glyphicon-menu-right"></i></dd>
                        </dl>
                            <dt class="fl dt2">最近浏览的商品<a href="#">全部浏览历史</a></dt>
                        </dl>
                        <p class="ts"></p>
                        </div>
                        </div>
                        <div class="cart fl"><i class="glyphicon glyphicon-shopping-cart"></i>购物车结算<span class="caret  up"></span>
                            <ul class="cart-list">
                                <li>最新加入的商品</li>
                                <li></li>
                                <li class="cart-list3"><input type="submit" class="btn js"value="结算购物车中的商品"/></li>
                            </ul>

                        </div>
                    
                </div>
                </div><!-- header-container -->
            </div><!-- header -->
            <!-- nav -->
            <div id="nav">
                <div class="container">
                    <div class="nav-list">
                        <div class="all fl">
                            <i class="glyphicon glyphicon-menu-hamburger"></i>全部分类

                            <!-- 三级导航 -->
                            <ul class="sanji">
                                <li class="sanji01 sanji0">
                                <a href="list.html" class="sanji00">微量元素</a>
                                 <div class="sanji1">
                                        <ul class="sanji11">
                                            <li><a href="list.html">维生素C</a></li>
                                            <li><a href="list.html">维生素D</a></li>
                                            <li><a href="list.car.html">多种维生素</a></li>
                                            <li><a href="list.html" >钙</a></li>
                                        </ul>
                                        <div class="sanji2"> 
                                            <p class="fl"><a href="list.html">维生素</a><span> &gt;</span></p>
                                            <ul class="sanji3">
                                            <li><a href="list.html" class="sanji111">维生素B</a></li>
                                                <li><a href="list.html" >维生素A</a></li>
                                                <li><a href="list.html">维生素B</a></li>
                                                <li><a href="list.html">维生素C</a></li>
                                                <li><a href="list.html">维生素D</a></li>
                                                <li><a href="list.html">维生素E</a></li>
                                                <li><a href="list.html">维生素K</a></li>
                                                <li><a href="list.html" class="sanji55">多种维生素</a></li>
                                            </ul>
                                        </div>
                                        <div class="sanji4">
                                            <p class="fl"><a href="list.html">矿物质</a><span> &gt;</span></p>
                                            <ul class="sanji5">
                                                <li><a href="list.html">钙</a></li>
                                                <li><a href="list.html">铁</a></li>
                                                <li><a href="list.html">锌</a></li>
                                            </ul>
                                        </div>
                                        
       

   
                                    </div>

                                </li>
                                <li class="sanji02 sanji0">
                                <a href="list.html" class="sanji00">营养补充</a>






                                </li>
                                <li class="sanji03 sanji0"><a href="list.html" class="sanji00">健身运动</a></li>
                                <li class="sanji04 sanji0"><a href="list.html" class="sanji00">美妆/个护</a></li>
                                <li class="sanji05 sanji0"><a href="list.html" class="sanji00">妈咪宝贝</a></li>
                                <li class="sanji06 sanji0"><a href="list.html" class="sanji00">家居/数码</a></li>
                                <li class="sanji07 sanji0"><a href="list.html" class="sanji00">中西药品</a></li>
                                <li class="sanji08 sanji0"><a href="list.html" class="sanji00">滋补保健</a></li>
                                <li class="sanji09 sanji0"><a href="list.html" class="sanji00">性福生活</a></li>
                                <li class="sanji10 sanji0"><a href="list.html" class="sanji00">环球美食</a></li>
                            </ul>


                           
                        </div>
                        <ul class="navlist fr">
                            <li><a href="../index.html" class="index">首页</a></li>
                            <li><a href="list.html">钙铁锌</a></li>
                            <li><a href="list.html">营养补充</a></li>
                            <li><a href="list.html">美妆个护</a></li>
                            <li ><a href="list.html" class="last">妈咪宝贝</a></li>
                    </ul>
                    </div>
                    
                </div>
                <div class="page"></div>
            </div>
            <div id="main-nav">
                <div class="container">
                        <ul>
                            <li><i class="glyphicon glyphicon-home"></i><a href="../index.html">首页</a> &gt;</li>

                            <li><a href="list.html">微量元素</a> &gt;</li>
                            <li><a href="list.html">维生素</a> &gt;</li>
                            <li><a href="list.html">维生素E</a> &gt;</li>
                            <li class="tl"></li>
                        </ul>
                </div>
            </div>
            <div class="datalist">
                <div class="container">
                    <div class="datal fl">
                        <div class="datal1">
                            <!-- 大图 -->
                            <img src="" class="big" data-big=""/ >
                        </div>
                        <div class="mining">
                            <img src="" class="min" style="border:1px solid list.htmlEF3C79"/>
                            <!-- 小图 -->
                        </div>
                        <div class="shar">
                            <a href="list.html" class="shars">分享(0)</a>
                            <a href="#" class="sc">收藏(0)</a>
                            <a href="#"><input type="checkbox">加入对比</a>
                        </div>
                    </div>
                    <div class="datar fr">
                        <div class="datar1">
                            <p class="pp"></p>
                            <p class="bt"></p>
                        </div>
                        <div class="datar2">
                            <p><span>市场价</span><del class="marketprice"></del></p>
                            <p><span>商场价</span><span class="shopprice"></span></p>
                            <p><span>商品评分</span><img src="../img/美国GNC健安喜 维生素E软胶囊100粒 - 百洋健康_r2_c2.png" alt="" /><a href="#">共有0条评价</a><span>(销量:0)</span></p>
                        </div>
                        <div class="datar3">
                            <div class="datar31">
                                <span>运费</span>
                                <span>BYHN保税仓</span>
                                <sapn>至</sapn>
                                <!-- <select><i>&or;</i><option value="" selected="selected">请选择地区</option></select> -->
                                <input type="text" value="请选择地区&or;"/>
                                <span class="have"><!--有货--></span>
                                <span class="yf"><!--免运费--></span>
                            </div>
                            <div class="datar32">
                                <p><span>税费：</span><span class="ms"><!--免税--></span></p>
                            </div>
                            <div class="datar33">
                                <a href="javascript:void(0)" title=""><input type="text" id="num" value="1" /><button class="glyphicon glyphicon-triangle-top addnum"></button ><button class="glyphicon glyphicon-triangle-bottom jnum"></button></a>
                                <p class="addcar"><i class="glyphicon glyphicon-shopping-cart"></i><a href="javascript:void(0)">加入购物车</a></p>
                                <p class="buy"><a href="">立即购买</a></p>
                                <div class="x"></div>
                            </div>
                            <div class="datar34">
                                <p><span>服务承诺：</span>
                                    <span><img src="../img/7day_60.gif" alt="" />CFDA认证</span>
                                    <span><img src="../img/psbf_60.gif" alt="" />无忧售后</span>
                                    <span><img src="../img/jswl_60.gif" alt="" />跨境商品</span>
                                </p>
                            </div>
                        </div>

                        
                    </div>

                    <div class="datar4 fl">
                            <div class="datar4-l fl">
                                <div class="datar4-l1"><span>百洋健康跨境自营店</span><img src="../img/kefu.png" alt="" /></div>
                                <div class="datar4-l2"><a href="javascript:void(0)">进店逛逛</a><a href="javascript:void(0)">关注店铺</a></div>
                                <div class="datar4-l3">
                                    <p class="xg">相关分类</p>
                                    <ul>
                                        <li><a href="javascript.volid(0)">维生素A</a></li>
                                        <li><a href="javascript.volid(0)">维生素B</a></li>
                                        <li><a href="javascript.volid(0)">维生素C</a></li>
                                        <li><a href="javascript.volid(0)">维生素D</a></li>
                                        <li><a href="javascript.volid(0)">维生素E</a></li>
                                        <li><a href="javascript.volid(0)">维生素K</a></li>
                                        <li><a href="javascript.volid(0)">多种维生素</a></li>
                                    </ul>
                                </div>
                            </div>
                            </div>
                            <div class="datar5 fr">
                                
                                <div class="datar51">
                                    <ul class="fl">
                                        <li>商品详情</li>
                                        <li>商品评价</li>
                                        <li>购买咨询</li>
                                    </ul>
                                    <p class="fr">手机购买<img src="../img/877779040.png" alt="" /></p>
                                </div>
                                <div class="datar52">
                                    <span class="hh"></span><span class="pp1"></span>
                                </div>
                                <div class="datar53">
                                    <img src="../img/2_05878296992837882_1280.jpg" alt="" />
                                    <img src="../img/2_05878296994094938_1280.jpg" alt="" />
                                    <img src="../img/2_05878296994522362_1280.jpg" alt="" />
                                    <img src="../img/2_05878296994576943_1280.jpg" alt="" />
                                    <img src="../img/2_05878296994585837_1280.jpg" alt="" />
                                    <img src="../img/2_05878296995071967_1280.jpg" alt="" />
                                    <img src="../img/2_05878296997544292_1280.jpg" alt="" />
                                    <img src="../img/2_05878296998458519_1280.jpg" alt="" />
                                    <img src="../img/2_05878297000798475_1280.jpg" alt="" />
                                    <img src="../img/2_05878297001029532_1280.jpg" alt="" />
                                    <img src="../img/2_05878297003838976_1280.jpg" alt="" />
                                    <img src="../img/2_05878297005098282_1280.jpg" alt="" />
                                    <img src="../img/2_05882561917948598_1280.jpg" alt="" />
                                    <img src="../img/2_05882561918412728_1280.jpg" alt="" />
                                    <img src="../img/2_05882561919041266_1280.jpg" alt="" />
                                </div>
                            </div>
<!--                         
                        </div> -->
                </div>
            </div>













             <!-- bottom -->
            <div id="bottom">
                <div class="container">
                    <div class="bimg2"><img src="../img/zhaoshang09_03.jpg"/></div>
                </div>
            </div>
            <!-- footer -->
            <div id="footer">
                <div class="container">
                    <div class="footer-l fl">
                        <h1>百洋健康</h1>
                        <div class="gz">
                            <span>关注我们</span>
                            <a href="#"><img src="../img/weibo02.png"/></a>
                            <a href="#"><img src="../img/weixin01.png"/></a>
                        
                        <div class="wb">
                        <img src="../img/weibo_qr.jpg"class="weibo"/>
                        <img src="../img/wexin_qr02.jpg"class="weixin"/>
                        </div>
                        </div>
                    </div>
                    <div class="footer-c fl">
                        <ul>
                            <li>新手指南
                            <dl>
                                <a href="#"><dd>购买流程</dd></a>
                                <a href="#"><dd>支付方式</dd></a>
                                <a href="#"><dd>通关税费</dd></a>
                            </dl>

                            </li>
                            <li>售后服务
                                <dl>
                                    <a href="#"><dd>退货政策</dd></a>
                                    <a href="#"><dd>退货流程</dd></a>
                                    <a href="#"><dd>退货细则</dd></a>
                                    <a href="#"><dd>退款流程</dd></a>
                                </dl>
                            </li>
                            <li>物流配送
                                <dl>
                                <a href="#"><dd>配送方式</dd></a>
                                <a href="#"><dd>物流跟踪</dd></a>
                                <a href="#"><dd>自选物流</dd></a>
                            </dl>
                            </li>
                            <li>关于我们
                                <dl>
                                <a href="#"><dd>公司简介</dd></a>
                                <a href="#"><dd>联系我们</dd></a>
                                <a href="#"><dd>招商合作</dd></a>
                            </dl>
                            </li>
                        </ul>
                    </div>
                    <div class="footer-r fr">
                        <div class="wapp fl">
                            <p class="tp"><img src="../img/weixin-qr.jpg" alt="" /></p>
                            <p class="wz">扫描进入微信商城</p>
                        </div>
                        <div class="app fl">
                            <p class="tp"><img src="../img/app-qr.jpg" alt="" /></p>
                            <p class="wz">扫描下载百洋APP</p>
                        </div>
                    </div>
                </div>
            </div>


            <div id="end">
                <div class="container">
                    <div class="end1">
                        <a href="#"  class="end11">首页</a>
                        <a href="#">联系我们</a>
                    </div>
                    <p class="end2">版权所有 © 2007-2018 青岛百洋健康药房连锁有限公司 百洋健康 鲁ICP备09091598号</p>
                    <div class="end3">
                        <a href="#"><img src="../img/jubao.jpg" alt="" /></a>
                        <a href="#"><img src="../img/chengxin.jpg" alt="" /></a>
                        <a href="#"><img src="../img/hangye.jpg" alt="" /></a>
                    </div>
                </div>
            </div>
    </div><!-- baiyang -->
    <div id="side">
        <div class="pos">
        <div class="login">
        <a href="#">
            <img src="../img/05755058785008341.jpg" alt="" />
        </a>
        <div class="details" id="details">会员登录</div>
        <div class="form">
            <div class="log">
            <span style="position:absolute;right:20px;top:0px;">&times;</span>
                <label for="username">登录名</label><br>
                <input type="text" id="username" name="username"/>
                
            </div>
            <div class="psw">
                <label for="password">登录密码
                    <a href="#">忘记密码?</a>
                </label><br>
                <input type="password" id="password" name="password"/>
                
            </div>
            <div class="code">
                <label for="code">
                    验证码
                    <span class="udcode">更换验证码</span>
                </label><br>
                <input type="text" id="code"/><span class="showcode"></span>
            </div>
            <div class="ts">
                
            </div>
        <div class="lg"><a href="index.html">确认</a></div>
        <div class="zc">
            <a href="html/reg.html">注册新用户</a>
        </div>
        </div>
        </div>
        <div class="car">
            <a href="#"><i class="glyphicon glyphicon-shopping-cart"></i>
            购物车</a>
        </div>
        <div class="msg">
            <a href="#"><i class="glyphicon glyphicon-comment"></i></a>
            <div class="details" id="details">在线联系</div>
        </div>
        <div class="comp">
            <a href="#"><i class="glyphicon glyphicon-tent"></i></a>
            <div class="details" id="details">商品对比</div>
        </div>
        </div>
        <div class="back">
            <a href="#">
            <i class="glyphicon glyphicon-arrow-up"></i>TOP</a>
            <div class="details" id="details">返回顶部</div>
        </div>
        










    </div>

</body>
<script>
    document.addEventListener('DOMContentLoaded',()=>{
                
                let toTop = document.querySelector('.back');
                // 点击返回顶部
            toTop.onclick = ()=>{
                let timer = setInterval(()=>{
                    // 计算缓冲速度
                    let speed = Math.ceil(window.scrollY/5);//1

                    scrollBy(0,-speed);


                    if(window.scrollY <= 0){
                        clearInterval(timer);
                    }
                },30)
            }
        })
</script>
</body>
</html>